<template>
  <div id="hosp">
    <div class="header">
      <div style="color: white">
        <i class="el-icon-user"></i>

        个人位置:柳州市
      </div>
      <div class="title">医疗救治定点医院和发热门诊一览</div>
    </div>
    <div class="inputBg">
      <el-input
        placeholder="请输入医院名称"
        v-model="pageParam.name"
      ></el-input>
    </div>
    <el-button icon="el-icon-search" circle @click="toSearch"></el-button>
    <div v-for="(item, index) in hospData" :key="index">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :title="item.name" :name="index">
          <div style="margin-bottom: 5px">
            <el-tag type="warning">标记:</el-tag>
            {{ item.flags }}
          </div>
          <div style="margin-bottom: 5px">
            <el-tag type="success">地址:</el-tag>
            {{ item.province }}{{ item.city }}
          </div>
          <div style="margin-bottom: 5px">
            <el-tag type="info">介绍</el-tag>
            {{ item.introduce }}
          </div>
          <div style="margin-bottom: 5px">
            <el-tag type="danger">与您当前的距离</el-tag>
            <i class="el-icon-location"></i>
            <span
              >{{
                distanceTwo(
                  currentlng,
                  currentlat,
                  item.longitude,
                  item.latitude
                )
              }}km</span
            >
          </div>
          <el-button
            @click="toJump(item)"
            type="primary"
            plain
            size="mini"
            round
            >路线规划</el-button
          >
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- <el-pagination
      @current-change="currentChange"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination> -->
  </div>
</template>

<script>
import axios from "../utils/request";
export default {
  data() {
    return {
      form: {},
      visible: false,

      currentPosition: "",
      currentlng: "",
      currentlat: "",
      activeNames: ["1"],
      hospData: [],
      total: 0,
      pageParam: {
        page: 1,
        pageSize: 10,
        name: "",
      },
    };
  },
  computed: {},
  methods: {
    // currentChange(val) {
    //   this.pageParam.page = val;
    //   this.pageQuery();
    // },
    toJump(hospital) {
      //hospital是医院对象
      //使用路由跳转页面
      this.$router.push({
        name: "mapRoute2.0",
        query: {
          one: hospital.longitude,
          two: hospital.latitude,
          name: hospital.name,
        },
      });
    },

    toSearch() {
      this.pageParam.page = 1;
      this.pageQuery();
    },
    distanceTwo(lng1, lat1, lng2, lat2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      // console.log("两地距离千米：", s);
      return s;
    },
    handleChange(val) {
      console.log(val);
    },
    async pageQuery() {
      let res = await axios.get("/hospital/pageQuery", {
        params: this.pageParam,
      });
      console.log(res);
      this.hospData = res.data.list;
      this.total = res.data.total;
      console.log(this.hospData, "------------tang");
    },
  },
  created() {
    this.pageQuery();
    navigator.geolocation.getCurrentPosition(
      (data) => {
        // 信息都包含在data.coords里面
        this.currentlng = data.coords.longitude;
        this.currentlat = data.coords.latitude;
      },
      (err) => {
        //err是地理位置错误对象
        console.log(err);
        // err是形如 {code: 3, message: "Timeout expired"} 的对象
      },
      {
        //配置对象
        enableHighAccuracy: true, //高精度
        timeout: 5000, //超时时间
        maximumAge: 10000, //位置缓存时间
      }
    );
  },
  mounted() {},
};
</script>
<style scoped>
#hosp {
  line-height: 60px;
  font-size: 20px;
}
.header {
  background-image: url("../assets/定点医院背景.jpg");
  background-size: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  height: 300px;
  position: relative;
}
.title {
  font-size: 50px;
  font-family: 华文楷体;
  font-weight: bold;
  color: black;
  position: absolute;
  margin: 50px;
}
.inputBg {
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
</style>